<%--
  Created by IntelliJ IDEA.
  User: 
  Date: 2019/1/19
  Time: 9:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>结算账户</title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui-v2.4.5/layui/css/modules/layer/default/layer.css" media="all">

    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>

<%--搜索框--%>
<div class="demoTable">
     &nbsp;名称:
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="depotName" id="InoutName"  autocomplete="off" class="layui-input">
        </div>
    </div>
    &nbsp;&nbsp;编号:
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="InoutType" id="InoutType"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <button class="layui-btn" id="layui-btns">搜索</button>
</div>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">流水</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="/layuiadmin/layui/layui.js"></script>
<script src="/layuiadmin/layui/lay/modules/layer.js"></script>
<script>


    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');

    layui.use('form', function () {
        form = layui.form;
    });

    layui.use(['laydate', 'laypage', 'jquery','layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , $ = layui.jquery
            , element = layui.element //元素操作


        //执行一个 table 实例
        var tableIns =   table.render({
            elem: '#demo'
            , height: 516
            , url: '/Account/getAcc' //数据接口
            , method: "post"
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            //, totalRow: true //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id',title: 'id', width:20 ,hide:true}
                , {field: 'name', title: '名称', width: 140}
                , {field: 'serialno', title: '编号', width: 190, sort: true}
                , {field: 'initialamount', title: '期初金额', width: 160, sort: true}
                , {field: 'currentamount', title: '当前余额', width: 160, sort: true}
                , {field: 'remark', title: '备注', width: 160, sort: true}
                , {field: 'isdefault', title: '是否默认', width: 100, sort: true}
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
        });

        //搜索
        $("#layui-btns").on("click",function(){

            var name = $("#InoutName").val();
            var type = $("#InoutType").val();
            console.log(name);
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    name: name,
                    type:type
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)

                , data = checkStatus.data; //获取选中的数据
            console.log(checkStatus);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');

                    //添加信息弹窗
                    layer.open({

                        type: 2,
                        closeBtn: 1,
                        content: 'addAccount', //这里content是一个普通的String,
                        area: ['600px', '500px']
                    });

                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                        console.log(data);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                        console.log(data);
                        var ids="";
                        for(var i=0;i<data.length;i++){
                            ids += data[i].id+",";
                        }

                        console.log(ids);

                        $.ajax({
                            url: "/Account/delAccounts/"+ids,
                            type:"delete",

                            success: function () {
                                location.reload();
                                layer.msg("删除成功");
                            }
                        })
                    }
                    break;
            }

        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    console.log(data);
                    console.log(data.id);
                    $.ajax({
                        url: "/Account/delAccount/"+data.id,
                        type:"delete",
                        /*data: {"id":data.id},*/
                        success: function () {
                            location.reload();
                            layer.msg("删除成功");
                        }
                    })
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });


    });
</script>
</body>
</html>

